<template>
  <view class='productList'>
    <view class="pro_select_content">
      <view class="select_item" @click="showSelectPopup(index)" v-for="(item,index) in 8"
        :class="selectTitleItem == index ? 'showSelect' : ''">
        <view>类别</view>
        <image :src="selectTitleItem == index ? activitySrc : defaultSrc" mode=""></image>
      </view>
    </view>
    <view class="pro_list">
      <view class="pro_list_item" v-for="item in 5">产品列表{{item}}</view>
    </view>
    <uni-popup class="select_popup" ref="selectPopup" :mask-click="false">
      <view class="selectPopup">
        <view class="select_popup_list">
          <view class="select_popup_item" @click="itemChoosed(item,index)" v-for="(item,index) in 7">
            <text :style="{'color': (choosedList.indexOf(item) != -1 ? '#FC7314':'#333333')}">{{item}}</text>
            <image v-show="choosedList.indexOf(item) != -1 ? itemChoose : itemNotChoose "
              src="../../static/image/icons/select_choosed.png" mode=""></image>
          </view>
        </view>
        <view class="select_btn">
          <text @click="resetChoosedList">重置</text>
          <text class="on" @click="submit">确定</text>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        selectTitleItem: -1,
        activitySrc: '../../static/image/icons/arrow-top.png',
        defaultSrc: '../../static/image/icons/arrow_bottom.png',
        choosedList: [],
        itemChoose: true,
        itemNotChoose: false,
        choosedItem: -1
      }
    },
    onLoad(options) {

    },
    onReady() {

    },
    methods: {
      //筛选列表
      showSelectPopup(index) {
        this.$refs.selectPopup.open('top')
        this.selectTitleItem = index
      },
      itemChoosed(item, index) {
        this.choosedItem = index
        if (this.choosedList.indexOf(item) !== -1) {
          this.choosedList.splice(this.choosedList.indexOf(item), 1)
        } else {
          this.choosedList.push(item)
        }
        console.log(this.choosedList)
      },
      //点击重置按钮
      resetChoosedList() {
        this.choosedList = []
      },
      //点击确定按钮
      submit() {
        this.$refs.selectPopup.close()
      }
    }
  }
</script>

<style scoped lang="scss">
  .productList {
    background-color: #F8F8F8;
    padding: 20upx 0 0;

    .pro_select_content {
      width: calc(100% - 48upx);
      padding: 23upx 24upx 0;
      background-color: #FFFFFF;
      display: flex;
      justify-content: space-between;
      overflow-x: auto;
      position: fixed;
      top: 127upx;
      left: 0;
      z-index: 999;

      .select_item {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 10upx 23upx;
        background-color: #F5F5F5;
        border-radius: 10upx;
        margin: 0 22upx 23upx 0;
        font-size: 26upx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
        display: flex;
        align-items: center;
        margin-right: 12upx;
        cursor: pointer;

        image {
          width: 16upx;
          height: 16upx;
          margin-left: 12upx;
        }
      }

      .select_item.on {
        border: 1px solid #FF9045;
        background-color: rgba(255, 144, 69, 0.2);
        color: #FC7314;
      }

      .select_item.showSelect {
        margin: 0 22upx 0 0;
      }
    }

    .pro_list {
      width: calc(100% - 48upx);
      padding: 24upx 24upx;
      background-color: #FFFFFF;
      margin-top: 230upx;

      .pro_list_item {
        width: 100%;
        display: flex;
        align-items: center;
        position: relative;
        margin-bottom: 22upx;
        overflow: hidden;
        font-size: 28upx;
        font-family: PingFang SC;
        font-weight: 500;
        color: $uni-prolist-color-title;
        line-height: 34upx;
      }
    }

    .select_popup {
      .selectPopup {
        width: calc(100% - 54upx);
        max-height: 382upx;
        padding: 29upx 27upx 39upx;
        background-color: #F5F5F5;
        border-radius: 5upx 5upx 15upx 20upx;
        margin-top: 206upx;

        .select_popup_list {
          width: 100%;
          height: 282upx;
          overflow-y: auto;
          display: flex;
          flex-wrap: wrap;

          .select_popup_item {
            cursor: pointer;
            width: 50%;
            display: flex;
            align-items: center;

            text {
              font-size: 28upx;
              font-family: PingFang SC;
              font-weight: 400;
              // color: #333333;
              line-height: 56upx;
            }

            image {
              width: 30upx;
              height: 30upx;
              margin-left: 22upx;
            }
          }
        }

        .select_btn {
          width: 570upx;
          height: 60upx;
          border: 1upx solid #FF9045;
          border-radius: 15upx;
          margin: 40upx auto 0;
          display: flex;
          overflow: hidden;
          cursor: pointer;

          text {
            cursor: pointer;
            display: inline-block;
            width: 286upx;
            height: 100%;
            font-size: 30upx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #FF9045;
            line-height: 60upx;
            text-align: center;
          }

          text.on {
            background: linear-gradient(90deg, #FFB267, #FF9045);
            color: #FFFFFF;
          }
        }
      }
    }
  }
</style>
